do not cut off bottom portion of text #2568

dajrivera · 2025-07-15T23:33:14Z

Summary

The bottom portion of texts get cut off on Edge, Chrome, & Firefox; this issue does not appear in Safari. Using CSS property line-height: normal seems to fix the issue and does not affect Safari's rendering of the page.

before:

after:

Related issue, if any:

N/A

What kind of change does this PR introduce?

Other: minor UI fix

For any code change,

Related documentation has been updated, if needed
Related tests have been added or updated, if needed

Does this PR introduce a breaking change?

No

Tested in the following browsers:

Chrome
Firefox
Safari
Edge

vercel · 2025-07-15T23:33:18Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docsify-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2025 3:04am

sy-records · 2025-07-16T02:24:16Z

Thanks for your contribution.

But I think this is by design, and you can modify it through the theme properties.

      :root {
        --heading-line-height: normal;
      }

paulhibbitts · 2025-07-16T13:58:21Z

I'd tend to include this fix, as by default I would expect line-height to be automatic by default in all Browsers and not require additional changes.

dajrivera · 2025-07-16T15:46:35Z

@sy-records ah, thanks; I did not check for an existing variable. I set the global variable and it did indeed fix the problem but as @paulhibbitts commented, I would expect the text to look correct by default in all browsers. I've moved the change to be the default --heading-line-height variable value so it can still be overridden by themes.

paulhibbitts · 2025-07-16T16:43:07Z

Thanks @dajrivera , now that I think about it I may also have run across this issue earlier when trying different fonts out with v5 and noticing I needed to then further adjust line-height to avoid slight cut-off one some particular ones.

src/themes/shared/_vars.css

paulhibbitts

LGTM

sy-records · 2025-07-17T03:28:43Z

I think there might be a problem.

* calculation must use units; 'normal' value breaks calculation * replace --header-line-height variable with line height unit (lh) * introduce line heigh multiplier to reduce or increase line height

dajrivera · 2025-07-17T07:03:57Z

@sy-records looks like the h2 bottom-margin is calculated and was the reason for the prior "Unit required" comment; using value normal here broke that calculation. I've updated the bottom-margin calculation using the line height unit instead. At this point the bottom margin was too large so I included a local line-height-multiplier to reduce the margin size as a workaround. Let me know if you can think of a better alternative or a more appropriate method to implement this.

Looks good to me in Edge. I can test Chrome, Firefox, and Safari tomorrow.

paulhibbitts · 2025-07-17T16:21:13Z

Good catch @sy-records , my apologies for not viewing additional pages in the PR preview... I will be more careful in the future.

From my perspective I hope that the resulting spacing unit adjustments match the spacing as originally specified by John Hildenbiddle as much as possible.

* change h2 margin calculation to use lh and em units to allow heading-line-height var to be any valid value (no unit requirement)

dajrivera · 2025-07-23T21:14:24Z

@sy-records @paulhibbitts Please review this again. I've changed the approach to only allow y overflow on h1 & h2 headings. Tested this on Edge, Chrome, Firefox, and Safari and all display the fonts without issue without additional changes to the rest of the UI.

If OK, let me know I can clean up the commits.

paulhibbitts · 2025-07-23T21:57:34Z

Thanks @dajrivera , but it looks like it strays quite a bit from the original theme spacing, re: H2 border and spacing.

Here is the current Docsify Preview:

And here is the latest PR Preview I see:

…of variables

dajrivera · 2025-07-23T22:11:41Z

@paulhibbitts sorry about that, seems the calc function went missing when reverting a change that was affecting safari; I've re-added it again.

paulhibbitts · 2025-07-23T22:22:05Z

No worries, now the preview looks identical to John's original layout ✅

Here is the current Docsify Preview:

And here is the updated PR Preview:

All looks good to me!

Copilot

Pull Request Overview

This PR fixes a text clipping issue where the bottom portion of text gets cut off in Edge, Chrome, and Firefox browsers. The fix involves modifying the overflow CSS properties to prevent vertical text clipping while maintaining horizontal overflow control.

Replaces single overflow: hidden property with separate overflow-x and overflow-y properties
Sets overflow-x: clip to handle horizontal overflow and overflow-y: visible to prevent vertical text clipping

Copilot · 2025-07-24T03:08:27Z

src/themes/shared/_markdown.css

@@ -251,7 +251,8 @@

    /* Prevent long titles from causing horizontal scrolling */
    &[id] a {
-      overflow: hidden;
+      overflow-x: clip;


The overflow-x: clip property has limited browser support compared to overflow-x: hidden. Consider using overflow-x: hidden for better browser compatibility, as clip may not be supported in older browsers.

Suggested change

overflow-x: clip;

overflow-x: hidden;

vercel bot deployed to Preview July 15, 2025 23:34 View deployment

dajrivera force-pushed the fix-bottom-text-cut-off branch from 7211041 to 81a470e Compare July 16, 2025 00:42

vercel bot deployed to Preview July 16, 2025 00:43 View deployment

dajrivera force-pushed the fix-bottom-text-cut-off branch from 81a470e to 87ed516 Compare July 16, 2025 00:56

vercel bot deployed to Preview July 16, 2025 00:57 View deployment

fix: do not cut off bottom portion of text

9ddb2e6

dajrivera force-pushed the fix-bottom-text-cut-off branch from 87ed516 to 9ddb2e6 Compare July 16, 2025 15:38

vercel bot deployed to Preview July 16, 2025 15:39 View deployment

sy-records requested review from jhildenbiddle and paulhibbitts July 17, 2025 02:25

sy-records reviewed Jul 17, 2025

View reviewed changes

src/themes/shared/_vars.css Outdated Show resolved Hide resolved

Update src/themes/shared/_vars.css

745ba13

vercel bot deployed to Preview July 17, 2025 02:27 View deployment

paulhibbitts previously approved these changes Jul 17, 2025

View reviewed changes

update markdown h2 bottom-margin calculation

d22ed31

* calculation must use units; 'normal' value breaks calculation * replace --header-line-height variable with line height unit (lh) * introduce line heigh multiplier to reduce or increase line height

dajrivera dismissed paulhibbitts’s stale review via d22ed31 July 17, 2025 06:54

vercel bot deployed to Preview July 17, 2025 06:55 View deployment

calculate h1, h2 top and bottom margins based on font line height

a66ab1d

vercel bot deployed to Preview July 18, 2025 19:02 View deployment

allow y overflow in h1, h2 headings

5a14726

* change h2 margin calculation to use lh and em units to allow heading-line-height var to be any valid value (no unit requirement)

vercel bot deployed to Preview July 23, 2025 20:51 View deployment

vercel bot deployed to Preview July 23, 2025 21:08 View deployment

dajrivera force-pushed the fix-bottom-text-cut-off branch from e3a16b8 to b814175 Compare July 23, 2025 21:09

vercel bot deployed to Preview July 23, 2025 21:10 View deployment

fix: safari has a slight ui difference using lh and em units instead …

fdce5fe

…of variables

dajrivera force-pushed the fix-bottom-text-cut-off branch from b814175 to fdce5fe Compare July 23, 2025 22:09

vercel bot deployed to Preview July 23, 2025 22:10 View deployment

Merge branch 'develop' into fix-bottom-text-cut-off

4c8efb7

vercel bot deployed to Preview July 24, 2025 03:04 View deployment

sy-records requested a review from Copilot July 24, 2025 03:08

Copilot AI reviewed Jul 24, 2025

View reviewed changes

Uh oh!

do not cut off bottom portion of text #2568

Are you sure you want to change the base?

do not cut off bottom portion of text #2568

Conversation

dajrivera commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related issue, if any:

What kind of change does this PR introduce?

For any code change,

Does this PR introduce a breaking change?

Tested in the following browsers:

Uh oh!

vercel bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sy-records commented Jul 16, 2025

Uh oh!

paulhibbitts commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dajrivera commented Jul 16, 2025

Uh oh!

paulhibbitts commented Jul 16, 2025

Uh oh!

Uh oh!

paulhibbitts left a comment

Choose a reason for hiding this comment

Uh oh!

sy-records commented Jul 17, 2025

Uh oh!

dajrivera commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

paulhibbitts commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dajrivera commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

paulhibbitts commented Jul 23, 2025

Uh oh!

dajrivera commented Jul 23, 2025

Uh oh!

paulhibbitts commented Jul 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dajrivera commented Jul 15, 2025 •

edited

Loading

vercel bot commented Jul 15, 2025 •

edited

Loading

paulhibbitts commented Jul 16, 2025 •

edited

Loading

dajrivera commented Jul 17, 2025 •

edited

Loading

paulhibbitts commented Jul 17, 2025 •

edited

Loading

dajrivera commented Jul 23, 2025 •

edited

Loading